<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import type { ComponentSize } from 'element-plus'


// 表格数据
const tableData = [
    {
        id: 1,
        date: 'SWG-NXAIR',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 4,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 5,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 6,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 7,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 8,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 9,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 10,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }
]


// 分页
const currentPage2 = ref(5)
const pageSize2 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const checked1 = ref(true)

// 组件卸载时清理
onUnmounted(() => {
})

onMounted(() => {
})
</script>

<template>
    <div class="taberbox">
        <div class="taberCon">
            <el-table :data="tableData" style="width: 100%;height: 650px;" max-height="650px">
                <el-table-column prop="date" label="Top Ranking" width="190" />
                <el-table-column prop="name" label="Parent Asset" width="180" />
                <el-table-column prop="address" label="Feeder" />
                <el-table-column prop="address" label="Panel No." center />
                <el-table-column prop="address" label="Event Description" />
                <el-table-column prop="address" label="Event Description" />
                <el-table-column fixed="right" label="Operations" width="150" align="center">
                    <template #default="scope">
                        <el-checkbox  size="large" />
                        <!-- <el-checkbox v-model="checked1" size="large" /> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenYe">
                <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
                :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                layout="sizes, prev, pager, next" :total="100" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>  
            
        </div>

    </div>
</template>

<style scoped lang="scss">
.taberbox {
    width: 100%;
    height: 780px;
    background-color: #1c2028;

    .taberCon {
        padding: 50px 20px 20px 20px;
        box-sizing: border-box;

        .el-table {
            border-color: black;
            background-color: #1d2028;

            :deep(th) {
                border: 1px solid #1d2028;
            }

            :deep(td) {
                border: 1px solid #000000;
            }
        }



        :deep(.el-table) {
            --el-table-border-color: black;
        }

        :deep(.el-table) th {
            background: #302f38;
            color: #e9e7e7;
            height: 60px;
            font-size: 18px;
            // text-align: center;
        }

        :deep(.el-table) tr {
            background: #1c222a;
            color: #929597;
            height: 60px;
            font-size: 16px;
        }

        :deep(.el-table__body) tr.current-row>td {
            background-color: #78f709 !important;
            // /* color: #f19944; */
            /* 设置文字颜色，可以选择不设置 */
        }

        :deep(.el-table--enable-row-hover) .el-table__body tr:hover>td {
            // background-color: #f6d604 !important;
            cursor: pointer;
            /* 修改鼠标样式 */
            color: #000000;
            /* 设置文字颜色，可以选择不设置 */
        }

        :deep(.el-table__empty-block) {
            background-color: #000000;
        }
    }
    .fenYe{
        width: 100%;
        display: flex;
        align-items: right;
        justify-content: right;
        padding: 25px 0;
        box-sizing: border-box;
    }

}
</style>
